<template>
	<div class="caption-configuration-container">
		<el-dialog title="字幕配置" :visible.sync="showCaptionDialog" width="406px" :before-close="cancelCaption" custom-class="caption-dialog" style="margin-top: 20vh">
			<div class="check-box">
				<el-checkbox v-model="form.agent">坐席端</el-checkbox>
				<el-checkbox v-model="form.customer">访客端</el-checkbox>
				<el-checkbox v-model="form.recording">录像文件</el-checkbox>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancelCaption" class="cancel-btn">取消</el-button>
				<el-button type="primary" @click="saveCaption" class="ok-btn">保存</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	name: 'captionConfiguration',
	components: {},
	props: {
		showCaptionDialog: {
			require: true,
			type: Boolean,
			default: () => false
		},
		drawTextOptions: {
			require: true,
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			form: {
				agent: true,
				customer: true,
				recording: true
			}
		};
	},
	watch: {
		drawTextOptions: {
			handler(newVal, oldVal) {
				this.form = { ...newVal };
				console.log('drawTextOptions', newVal, oldVal);
			},
			deep: true
		}
	},
	mounted() {
		this.form = { ...this.drawTextOptions };
		// console.log(this.drawTextOptions, 'captionConfiguration');
	},
	methods: {
		cancelCaption() {
			this.form = { ...this.drawTextOptions };
			this.$emit('cancelCaption');
		},
		saveCaption() {
			this.$emit('saveCaption', this.form);
		}
	}
};
</script>

<style lang="less">
.caption-dialog {
	.el-dialog__header {
		border-bottom: 1px solid #eee;
	}
	.check-box {
		display: flex;
		flex-direction: column;
		.el-checkbox {
			padding: 0px 0 23px;
			margin-left: 35px;
		}
	}
}
</style>
